<template>
	<view class="page">
		<u-navbar title="用户管理" :is-back="true"
			background="url('https://www.yplm888.com//uploads/20220803/7ed305f9a93ba50b049a7725662b18cc.png') no-repeat">
		</u-navbar>
		<!-- <view class="search-all-wrap">
			<view class="search-wrap">
				<text class="iconfont icon-faxianchaxun"
					style="color: #fe466b; font-size: 45rpx; margin-right: 20rpx;"></text>
				<input class="uni-input" style="width: 500rpx;" placeholder="请输入用户姓名或手机号" :disabled="disabled"
					confirm-type="search" placeholder-style="color:#C7C7C7; font-size:20rpx;" v-model="searchValue" @keyup.enter.native="queryInfo()" @input="queryInfo" />
			</view>
		</view> -->
		<view class="">
			<my-input @search="search" :value='searchVaule'></my-input>
		</view>
		<scroll-view refresher-default-style="white" scroll-y="true" @scrolltolower="pullLoad" class="container_scroll"
			@refresherrestore='refresherrestore' :refresher-triggered="flag" refresher-background="#eeeeee"
			refresher-enabled="true" scroll-anchoring="true" @refresherrefresh="refresherrefresh">
			<view class="animated fast fadeIn userinfo-list" v-for="item in userList" :key="index">
				<view class="p-3">
					<view class="user_portrait">
						<image :src="item.avatar" mode=""></image>
					</view>
					<view class="user_info">
						<view class="user_detail"><text class="user_name">{{item.nickname}}</text></view>
						<view class="user_detail">{{item.mobile}}</view>
					</view>
					<text
						:class="{identity:true,vip:item.vip === 1,normal:item.vip !== 1}">{{item.vip === 1?'会员':'普通用户'}}</text>
					<view class="user_identity" @click="goDetail">详情</view>
				</view>
			</view>
		</scroll-view>

	</view>
</template>
<script>
	const app = getApp();

	export default {
		components: {},

		data() {
			return {
				userList: [],
				searchValue: '',
				page: 1,
				limit: 8,
				flag: false,
				time: '',
			}
		},
		onLoad() {
			this.getData(true)
		},
		onReady() {
			uni.getSystemInfo({
				success: (res) => {
					this.scrollH = res.windowHeight * 750 / res.windowWidth;
					// #ifdef MP-WEIXIN
					this.scrollH = res.windowHeight * 750 / res.windowWidth - parseInt(res.safeArea.top) - this
						.height - 400;
					// #endif
				}
			});
		},
		onShow() {},
		watch: {},
		methods: {
			queryInfo(e) {
				this.page = 1
				if (this.time) {
					clearTimeout(this.time);
				}
				this.time = setTimeout(() => {
					console.log(this.searchValue)
					this.getData(true)
				}, 1000)
			},
			async getData(isFirst) {
				let params = {
					page: isFirst ? 1 : ++this.page,
					limit: 8,
					keyword: this.searchVaule
				}
				// this.searchValue ? params.keyword = this.searchValue : ''
				/* let res = await this.$u.api.userList({
					params
				}) */
				this.$u.api.userList(params).then(res => {
					if (res.code === 1) {
						isFirst ? this.userList = res.data : this.userList = [...this.userList, ...res.data]
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none',
							duration: 2000,
						})
					}
				})
			},
			pullLoad() {
				this.getData()
			},
			// 搜索的值
			search(value) {
				console.log(value)
				this.searchVaule = value
				this.userList = []
				this.getData() 
			},
			refresherrestore() {},
			refresherrefresh() {
				this.page = 1
				console.log(this.page)
				this.flag = true
				this.getData(true)
				setTimeout(() => {
					this.flag = false
				}, 1000)
				console.log(this.flag)
			},
			goDetail(){
				uni.navigateTo({
					url:'../../../packageA/pages/userDetail'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.page {
		width: 100%;
		height: 100%;
		overflow-x: hidden;

		.userinfo-list {
			overflow-x: hidden;
			margin: 20rpx;
			box-shadow: 0 0px 12px 0 rgba(0, 0, 0, 0.1);
			border-radius: 40rpx;
		}

		.search-all-wrap {
			margin-left: 2%;
			margin-top: 10rpx;
			width: 90%;
			height: 60rpx;

			.search-wrap {
				width: 100%;
				height: 100%;
				line-height: 60rpx;
				border-radius: 30rpx;
				margin-left: 20rpx;
				padding-left: 20rpx;
				background-color: #F5F5F5;
				float: left;
			}

			.search-wrap text,
			.search-wrap input {
				float: left;
				background-color: #F5F5F5;
				height: 100%;
				padding: 0;
			}
		}

		.container_scroll {
			width: 100%;
			height: calc(100vh - 294rpx);
			box-sizing: border-box;
			padding: 20rpx;
		}
	}

	.p-3 {
		display: flex;
		position: relative;

		.user_portrait {
			width: 120rpx;
			height: 120rpx;

			image {
				width: 100%;
				height: 100%;
				border-radius: 100%;
			}
		}

		.user_info {
			height: 120rpx;
			margin-left: 10rpx;

			.user_detail {
				height: 60rpx;
				display: flex;
				align-items: center;


			}
		}
	}

	.identity {
		position: absolute;

		border-radius: 20rpx;
		height: 50rpx;

		width: 130rpx;
		text-align: center;
		line-height: 50rpx;
		margin-left: 20rpx;
		box-sizing: border-box;
		right: 30rpx;
		top: 30rpx;
	}

	.vip {
		border: 2rpx solid #dc2929;
		color: #dc2929;
	}

	.normal {
		border: 2rpx solid gray;
		color: gray;
	}

	.user_identity {
		position: absolute;
		bottom: 30rpx;
		right: 30rpx;
		width: 130rpx;
		text-align: center;
		height: 50rpx;
		line-height: 50rx;
		border-radius: 20rpx;
		color: #3c9cff;
		border: 2rpx solid #3c9cff;
	}
</style>
